<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    button{
      width: 100px;
      height: 100px;
      font-size: 36px;
    }
  </style>
  
</head>
<body>
  <button>1*</button>
  <button>2</button>
  <button>3</button>

  <script>
    /* 
      要求，
        默认第一个按钮有星星
        点击带有星星的按钮，让当前星星消失
        下一个按钮有星星
    */
    var btns = document.querySelectorAll('button')

    var n = 0;  // 初始一个n变量，用来记录当前星星所在按钮的索引值

    // console.log(btns);  验证是否获取到所有的按钮
    for(var i = 0; i < btns.length; i++) {
      //console.log(btns[i]); 验证获取到的是不是每一个按钮元素
      //console.log(btns[i].innerHTML); 验证是否获取到每一个按钮上的文字
      // console.log(typeof btns[i].innerHTML); 验证出来获取到的内容是字符串类型

      btns[i].onclick = function() {
        // console.log(i); // 程序先执行完毕，再执行函数，所以这里打印的是3
        // console.log(this) // this指向的是当前点击的按钮
        // console.log(this.innerHTML); // 获取的是当前点击的那个按钮的文字内容

        // 判断当前按钮有，就去掉星星
        if(this.innerHTML.indexOf('*') != -1) {
          this.innerHTML = n + 1;
          // n定义的是有星星的索引值，去掉当前的星星后，要把星星给到下一个，因此n++
          n++
          if(n > btns.length - 1) {
            n = 0;
          }
          btns[n].innerHTML = n + 1 + "*"
        }

      }
    }
    // 验证引用数据类型
    // console.log(btns instanceof Array);型
    // var arr = [1, 2, 3]
    // console.log(arr instanceof Array);
  </script>
</body>
</html>